*, fieldset, input
	box-sizing: border-box
	margin: 0
	padding: 0
	font-family: 'Raleway', sans-serif

.wrapper
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	height: 100vh
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%)
	background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%)

	header
		display: flex
		justify-content: center
		align-items: center
		height: 15%
		
		h1
			color: #fff
			text-shadow: 2px 2px #000

	main
		display: flex
		flex-direction: column
		justify-content: center
		align-items: center
		height: 85%
		perspective: 1000px

		.rotatingForm
			height: 400px
			width: 300px
			transform-style: preserve-3d
			transition: all 1s ease-in-out
	
			&::after
				content: ""
				position: absolute
				display: block
				width: 300px
				height: 300px
				background-color: rgba(0, 0 ,0 , 0.5)
				transform: rotateX(90deg) translateZ(-300px) scale(0.85)
				box-shadow: 0 0 100px 75px rgba(0, 0, 0, 0.5)

			.step
				position: absolute
				height: 400px
				width: 300px
				padding: 50px
				border: 2px solid #30cfd0
				background-image: linear-gradient(60deg, #29323c 0%, #485563 100%)
				color: #fff
				
				.inputSetContainer
					position: relative
		
					input
						width: 100%
						margin-bottom: 60px
						border: 0
						border-bottom: 2px solid #30cfd0
						padding: 5px
						outline: 0
						background: 0
						color: #fff

						&:focus
							border-bottom: 2px solid #c1f1f1

					label:not(.rbLabel)
						position: absolute
						top: 7px
						left: 5px
						z-index: -1
						font-size: 1rem
						font-weight: 700
						color: #30cfd0
						transition: all 0.5s ease-in-out
			
						&.focused
							top: -10px
							font-size: 0.7rem
		
				.btnContainer
					display: flex
					width: 100%
					justify-content: center
					align-self: flex-end
		
					.next-btn
						right: 20px
			
					.back-btn
						left: 20px
			
					.submit-btn
						border: 0
						padding: 0 25px !important
		
					.next-btn, .back-btn, .submit-btn
						position: absolute
						bottom: 20px
						display: flex
						justify-content: center
						align-items: center
						height: 30px
						border-radius: 5px
						padding: 10px 25px
						background-color: #30cfd0
						font-weight: 700 
						color: black
						text-decoration: none
						transition: all 0.5s ease-in-out

						&:hover
							background-color: #c1f1f1
							color: #111
			
.step1
	transform: rotateY(0deg) translateZ(150px)

.step2
	transform: rotateY(90deg) translateZ(150px)

.step3
	transform: rotateY(180deg) translateZ(150px)

.step4
	transform: rotateY(270deg) translateZ(150px)

.rotatingForm.show-step1
	transform: translateZ(-150px) rotateY(-0deg)

.rotatingForm.show-step2
	transform: translateZ(-150px) rotateY(-90deg)

.rotatingForm.show-step3
	transform: translateZ(-150px) rotateY(-180deg)

.rotatingForm.show-step4
	transform: translateZ(-150px) rotateY(-270deg)


//custom css for profile --- ignore it :P
// $color1 : #FB4D3D

// .profile-header
// 	background-color: #FB4D3D

// #profile-name-header
// 	color: $color1
// 	border-bottom: 2px solid $color1

// .profile-avatar
// 	border-color: $color1
// 	border-radius: 50%

// #profile-location
// 	display: none

// #followers-count:after
// 	content: "5144"

// .button:not(.button-outline)
// 	background-color: $color1

// .button, .button-outline
// 	border-color: $color1

// .button-outline:hover
// 	background-color: $color1
// 	color: #fff

// .profile-username
// 	color: #fff
	